<template>
	<view class="cu-modal drawer-modal justify-start" :class="modalName=='DrawerModalL'?'show':''" @tap="hideModal">
		<view class="cu-dialog basis-lg" @tap.stop=""
			:style="[{top:CustomBar+'px',height:'calc(100vh - ' + CustomBar + 'px)'}]">
			<view class="cu-list menu ">
				<view class="top">
					<view class="title">主要用途<text style="font-size: 20px;color:#1296db;" class="cuIcon-triangledownfill"></text></view>
					<view>
						<view v-for="(item,index) in yongtu" :key="index">
							<button class="cu-btn blue shadow" :class="item.checked?'bg-blue':'line-blue'"
								style="width: 80%;margin-bottom: 10px;shape-outside: 10px;"
								@tap="ChooseCheckbox(index)">
								{{item.name}}
							</button>
						</view>
					</view>
				</view>
				<view class="mid">
					<view class="title">期望价格<text style="font-size: 20px;color:#1296db;" class="cuIcon-triangledownfill"></text></view>
						<picker class="yusuan" mode="multiSelector" @change="MultiChange" @columnchange="MultiColumnChange"
							:value="multiIndex" :range="multiArray">
							
							<view class="dazi" style="top: 66upx; color: #1296db;" v-if="!first">
								{{multiArray[0][multiIndex[0]]}} — {{multiArray[1][multiIndex[1]]}}</view>
							<button class="xiaozi" v-if="first">请选择理想的薪资范围</button>
							<!-- <view class="xiaozi" v-if="first">请选择理想的薪资范围</view> -->
						</picker>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "OptionSearch",
		props: {
			condition: {
				type: Object,
				required: true
			},
			fumultiIndex:{
				type:Array,
				required:true
			},
			fumultiArray:{
				type:Array,
				required:true
			},
			fufirst:{
				type:Boolean,
				required:true
			}
		},
		data() {
			return {
				modalName: null,
				first:true,
				multiIndex: [],
				multiArray: [],
				wk:[
					['2000', '3000', '4000', '5000', '6000', '7000', '8000', '9000', '10000+'],
					['3000', '4000', '5000', '6000', '7000', '8000', '9000', '10000+']
				],
				yongtu: [{
						name: '家用娱乐',
						checked: true
					},
					{
						name: '游戏竞技',
						checked: true
					},
					{
						name: '编程设计',
						checked: true
					},
					{
						name: '渲染剪辑',
						checked: true
					},
					{
						name: '深度学习',
						checked: true
					},
					{
						name: '个人服务器',
						checked: true
					},
				]
			};
		},
		mounted() {
			this.modalName = 'DrawerModalL'
			this.multiIndex=this.fumultiIndex
			this.multiArray=this.fumultiArray
			this.first=this.fufirst
			console.log(this.fufirst)
			if(this.condition.min!=null){
				this.xianshi=true
			}
			this.yongtu = this.yongtu.map((item) => {
				if (!this.condition.yongtu.includes(item.name)) {
					item.checked = false
				}
				return item
			})
		},
		methods: {
			MultiColumnChange(e) {
				this.multiIndex[e.detail.column] = e.detail.value;
				switch (this.multiIndex[0]) {
					case 0:
						this.wk[1] = ['3000', '4000', '5000', '6000', '7000', '8000', '9000', '10000+']
						this.multiArray = this.wk;
						break;
					case 1:
						this.wk[1] = ['4000', '5000', '6000', '7000', '8000', '9000', '10000+']
						this.multiArray = this.wk
						break;
					case 2:
						this.wk[1] = ['5000', '6000', '7000', '8000', '9000', '10000+']
						this.multiArray = this.wk
						break;
					case 3:
						this.wk[1] = ['6000', '7000', '8000', '9000', '10000+']
						this.multiArray = this.wk
						break;
					case 4:
						this.wk[1] = ['7000', '8000', '9000', '10000+']
						this.multiArray = this.wk
						break;
					case 5:
						this.wk[1] = ['8000', '9000', '10000+']
						this.multiArray = this.wk
						break;
					case 6:
						this.wk[1] = ['9000', '10000+']
						this.multiArray = this.wk
						break;
					case 7:
						this.wk[1] = ['10000+']
						this.multiArray = this.wk
						break;
					case 8:
						this.wk[1] = ['~']
						this.multiArray = this.wk
						break;

				}
				this.multiIndex = [this.multiIndex[0], 0];
			},
			MultiChange(e) {
					this.multiIndex = e.detail.value
					this.first=false
					this.condition.min=Number.parseInt(this.multiArray[0][this.multiIndex[0]])
					this.condition.max=Number.parseInt(this.multiArray[1][this.multiIndex[1]])
					if(Number.isNaN(this.condition.max)){
						this.condition.max=Number.MAX_VALUE
					}
			},
			hideModal(e) {
				let self = this
				this.modalName = null
				// 等待动画完毕后关闭
				setTimeout(function() {
					self.$emit('handlesearch')

				}, 200)
				this.$emit("handleflash", this.condition,this.multiArray,this.multiIndex,this.first)

			},
			ChooseCheckbox(index) {
				this.yongtu[index].checked = !this.yongtu[index].checked
				// 选中或者取消选中后更改condition
				this.condition.yongtu = this.yongtu.filter((item) => {
					return item.checked
				}).map((item) => {
					return item.name
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.title {
		margin: 10px;
		text-align: left;
		font-weight: bold;
		margin-bottom: 10px;
	}

	.pricebox {
		display: flex;
		flex-direction: row;
		justify-content: center;
		font-size: 12px;

		view {
			line-height: 30px;
		}

		input {
			width: 38%;
			height: 30px;
			border: 1px solid #1296db;
			border-radius: 5px;
			margin: 0px 5px;
		}
	}
	.xiaozi{
		width: 90%;
		background-color: #0081FF;
		font-size: 12px;
	}
</style>
